<template>
    <div>
      <!--页面区域-->
      <div class="page-view">
        <div class="table-operations">
          <a-space>
            <a-button type="primary" @click="handleAdd">新增</a-button>
            <a-button @click="handleBatchDelete">批量删除</a-button>
          </a-space>
        </div>
        <a-table
          size="middle"
          rowKey="id"
          :loading="data.loading"
          :columns="columns"
          :data-source="data.tagList"
          :scroll="{ x: 'max-content' }"
          :row-selection="rowSelection"
          :pagination="{
            size: 'default',
            current: data.page,
            pageSize: data.pageSize,
            onChange: (current) => (data.page = current),
            showSizeChanger: false,
            showTotal: (total) => `共${total}条数据`,
          }"
        >
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'operation'">
              <span>
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除?" ok-text="是" cancel-text="否" @confirm="confirmDelete(record)">
                  <a href="#">删除</a>
                </a-popconfirm>
              </span>
            </template>
          </template>
        </a-table>
      </div>
  
      <!--弹窗区域-->
      <div>
        <a-modal
          :visible="modal.visile"
          :forceRender="true"
          :title="modal.title"
          ok-text="确认"
          cancel-text="取消"
          @cancel="handleCancel"
          @ok="handleOk"
        >
          <div>
            <a-form ref="myform" :label-col="{ style: { width: '80px' } }" :model="modal.form" :rules="modal.rules">
              <a-row :gutter="24">
                <a-col span="24">
                  <a-form-item label="顾客姓名" name="name">
                    <a-input placeholder="请输入" v-model:value="modal.form.name"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="性别" name="sex">
                    <a-input placeholder="请输入" v-model:value="modal.form.sex"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="年龄" name="age">
                    <a-input placeholder="请输入" v-model:value="modal.form.age"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="手机号" name="mobile">
                    <a-input placeholder="请输入" v-model:value="modal.form.mobile"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="地址" name="address">
                    <a-input placeholder="地址" v-model:value="modal.form.address"></a-input>
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <a-form-item label="积分" name="jifen">
                    <a-input placeholder="地址" v-model:value="modal.form.jifen"></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-modal>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
    import { FormInstance, message } from 'ant-design-vue';
    import { createApi, listApi, updateApi, deleteApi } from '/@/api/customer';
  
  
    const columns = reactive([
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        align: 'center'
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        align: 'center'
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        align: 'center'
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        align: 'center'
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center'
      },
      {
        title: '积分',
        dataIndex: 'jifen',
        key: 'jifen',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'operation',
        align: 'center',
        fixed: 'right',
        width: 140,
      },
    ]);
  
    // 页面数据
    const data = reactive({
      tagList: [],
      loading: false,
      keyword: '',
      selectedRowKeys: [] as any[],
      pageSize: 10,
      page: 1,
    });
  
    // 弹窗数据源
    const modal = reactive({
      visile: false,
      editFlag: false,
      title: '',
      form: {
        id: undefined,
        name: undefined,
        sex: undefined,
        age: undefined,
        mobile: undefined,
        address: undefined,
        jifen: undefined,
      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'change' }],
      },
    });
  
    const myform = ref<FormInstance>();
  
    onMounted(() => {
      getDataList();
    });
  
    const getDataList = () => {
      data.loading = true;
      listApi({
        keyword: data.keyword,
      })
        .then((res) => {
          data.loading = false;
          console.log(res);
          res.data.forEach((item: any, index: any) => {
            item.index = index + 1;
          });
          data.tagList = res.data;
        })
        .catch((err) => {
          data.loading = false;
          console.log(err);
        });
    };
  
    const onSearchChange = (e: Event) => {
      data.keyword = e?.target?.value;
      console.log(data.keyword);
    };
  
    const onSearch = () => {
      getDataList();
    };
  
    const rowSelection = ref({
      onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        data.selectedRowKeys = selectedRowKeys;
      },
    });
  
    const handleAdd = () => {
      resetModal();
      modal.visile = true;
      modal.editFlag = false;
      modal.title = '新增';
      // 重置
      for (const key in modal.form) {
        modal.form[key] = undefined;
      }
    };
    const handleEdit = (record: any) => {
      resetModal();
      modal.visile = true;
      modal.editFlag = true;
      modal.title = '编辑';
      // 重置
      for (const key in modal.form) {
        modal.form[key] = undefined;
      }
      for (const key in record) {
        modal.form[key] = record[key];
      }
    };
  
    const confirmDelete = (record: any) => {
      console.log('delete', record);
      deleteApi({ ids: record.id })
        .then((res) => {
          getDataList();
        })
        .catch((err) => {
          message.error(err.msg || '操作失败');
        });
    };
  
    const handleBatchDelete = () => {
      console.log(data.selectedRowKeys);
      if (data.selectedRowKeys.length <= 0) {
        console.log('hello');
        message.warn('请勾选删除项');
        return;
      }
      deleteApi({ ids: data.selectedRowKeys.join(',') })
        .then((res) => {
          message.success('删除成功');
          data.selectedRowKeys = [];
          getDataList();
        })
        .catch((err) => {
          message.error(err.msg || '操作失败');
        });
    };
  
    const handleOk = () => {
      myform.value
        ?.validate()
        .then(() => {
          if (modal.editFlag) {
            updateApi({ id: modal.form.id }, modal.form)
              .then((res) => {
                hideModal();
                getDataList();
              })
              .catch((err) => {
                message.error(err.msg || '操作失败');
              });
          } else {
            createApi(modal.form)
              .then((res) => {
                hideModal();
                getDataList();
              })
              .catch((err) => {
                message.error(err.msg || '操作失败');
              });
          }
        })
        .catch((err) => {
          console.log('不能为空');
        });
    };
  
    const handleCancel = () => {
      hideModal();
    };
  
    // 恢复表单初始状态
    const resetModal = () => {
      myform.value?.resetFields();
    };
  
    // 关闭弹窗
    const hideModal = () => {
      modal.visile = false;
    };
  </script>
  
  <style scoped lang="less">
    .page-view {
      min-height: 100%;
      background: #fff;
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
  
    .table-operations {
      margin-bottom: 16px;
      text-align: right;
    }
  
    .table-operations > button {
      margin-right: 8px;
    }
  </style>
  